import React, { useEffect, useState } from 'react'
import { NavBar } from 'antd-mobile';
import { useNavigate } from 'react-router-dom';
import { List, Input, Toast, Popup, Button } from 'antd-mobile'
import "./Hs.css"
import axios from 'axios';
import { Uploader, Cell } from '@nutui/nutui-react'

export default function Personalinformation() {
    let [obj, setobj] = useState({})
    let [name, setname] = useState("")
    let [test, settest] = useState("")
    const [visible1, setVisible1] = useState(false)
    const [visible2, setVisible2] = useState(false)
    let [flag, setflag] = useState(true)
    useEffect(() => {
        get_id()
    }, [])
    let get_id = async () => {
        let id = localStorage.getItem("user_id")
        let { data } = await axios.get("http://127.0.0.1:3000/getuset_id?id=" + id)
        if (data.obj.name == "无") {
            data.obj.name = '用户' + id.slice(id.length - 4)
        }
        setobj(data.obj)
    }
    const onStart = () => {
        setflag(true)
        console.log(11);
        
    }
    let navigate = useNavigate()
    return (
        <div>
            <NavBar onBack={() => { navigate(-1) }}>个人资料</NavBar>
            <div style={{ background: "#f7f7f7", height: "calc(100vh - 45px)" }}>
                <div style={{ textAlign: "center", padding: "50px" }}>
                    {flag ?
                        <img style={{ width: "100px", height: "100px", borderRadius: "50%" }} src={obj.img} alt="" onClick={()=>{setflag(false)}} />
                        :
                        <div style={{ margin: "0 auto" }}><Uploader style={{ width: "100px", height: "100px", borderRadius: "50%", margin: "0 auto" }} url={`http://127.0.0.1:3000/putimg?id=`+obj._id} onStart={onStart} /></div>
                    }
                    <p>修改头像</p>
                </div>
                <div>
                    <List header=' '>
                        <List.Item extra={obj.name} onClick={() => {
                            setVisible1(true)
                        }}
                        >昵称</List.Item>
                        <Popup visible={visible1} onMaskClick={() => {
                            setVisible1(false);
                        }} onClose={() => {
                            setVisible1(false);
                        }} bodyStyle={{ height: '20vh' }}>
                            <div style={{ width: "100%", boxSizing: "border-box", padding: "30px" }}>
                                <Input style={{ color: "#6f6f6f" }} value={name} placeholder='请输入要修改的昵称' onChange={val => {
                                    setname(val)
                                }}></Input>
                                <Button style={{ width: "100%", margin: "20px 0" }} color='primary' fill='solid' onClick={async () => {
                                    let { data } = await axios.post("http://127.0.0.1:3000/putname", { id: obj._id, name: name })
                                    if (data.code == 200) {
                                        setVisible1(false)
                                        get_id()
                                        Toast.show({
                                            icon: 'success',
                                            content: '修改昵称成功',
                                        })
                                    }
                                }}>修改</Button>
                            </div>
                        </Popup>
                        <List.Item extra={obj._id}>ID</List.Item>
                        <List.Item extra={obj.test} clickable onClick={() => {
                            setVisible2(true)
                        }}>简介</List.Item>
                        <Popup visible={visible2} onMaskClick={() => {
                            setVisible2(false);
                        }} onClose={() => {
                            setVisible2(false);
                        }} bodyStyle={{ height: '40vh' }}>
                            <div style={{ width: "100%", boxSizing: "border-box", padding: "30px" }}>
                                <textarea style={{ border: "0", width: "100%", height: "20vh", color: "#6f6f6f", fontSize: "18px" }} value={test} placeholder='请输入要修改的简介' onChange={val => {
                                    settest(val.target.value)
                                }}></textarea>
                                <Button style={{ width: "100%", margin: "20px 0" }} color='primary' fill='solid' onClick={async () => {
                                    let { data } = await axios.post("http://127.0.0.1:3000/puttest", { id: obj._id, test: test })
                                    if (data.code == 200) {
                                        setVisible2(false)
                                        get_id()
                                        Toast.show({
                                            icon: 'success',
                                            content: '修改简介成功',
                                        })
                                    }
                                }}>修改</Button>
                            </div>
                        </Popup>
                        {obj.sex == "男" ?
                            <List.Item extra={<div><button className='hs_but_active'>男生</button><button className='hs_but'>女生</button></div>}>性别</List.Item>
                            :
                            <List.Item extra={<div><button className='hs_but'>男生</button><button className='hs_but_active'>女生</button></div>}>性别</List.Item>
                        }
                    </List>
                </div>
            </div>
        </div>
    )
}